<template>
  <el-row :gutter="16" class="dashboard-container">
    <el-col :span="16">
      <div class="app-container fill-container">
        <div class="flex flex-middle mt-8 mb-8">
          <img :src="avatar" class="user-avatar">
          <div class="flex-col">
            <span class="welcome-content">{{ nickname }}， 您好 👏</span>
            <span class="welcome-happy">祝你开心快乐每一天</span>
          </div>
        </div>

        <el-divider style="margin: 8px" />

        <div class="content-group">
          <div class="content-title">您当前的角色为：</div>
          <div class="content-li" v-for="role in roles">{{ role }}</div>
        </div>
      </div>
    </el-col>
    <el-col :span="8">
      <img src="@/assets/images/banner.jpg" class="banner" />
      <div class="app-container">
        <div class="module-title-bar">
          <span class="title">快捷入口</span>
          <span class="ph"></span>
        </div>
        <el-row class="shortcut-list" :gutter="24">
          <el-col :span="6" v-for="item in shortcut" :key="item.name">
            <div class="shortcut-item" @click="$router.push(item.url)">
              <svg-icon class="item-bg" :icon-class="item.icon" />
              <span class="name">{{ item.name }}</span>
            </div>
          </el-col>
        </el-row>
      </div>
    </el-col>
  </el-row>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
  name: 'Index',
  data() {
    return {
      shortcut: [
        {
          name: '流程表单',
          icon: 'form',
          url: '/bpm/form'
        },
        {
          name: '流程模型',
          icon: 'example',
          url: '/bpm/model'
        },
        {
          name: '用户管理',
          icon: 'user',
          url: '/system/user'
        },
        {
          name: '用户分组',
          icon: 'peoples',
          url: '/system/user-group'
        },
        {
          name: '角色管理',
          icon: 'people',
          url: '/system/role'
        },
      ]
    }
  },
  computed: {
    ...mapGetters([
      'avatar',
      'nickname',
      'roles',
    ]),
  },
  methods: {
  }
}
</script>

<style lang="scss" scoped>
.dashboard-container {
  min-height: 100%;
  width: 100%;

  .fill-container {
    height: calc(100vh - 92px - 15px);
  }

  .user-avatar {
    cursor: pointer;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    margin-right: 12px;
  }

  .welcome-content {
    color: #1d2129;
    font-size: 18px;
    font-weight: 500;
  }

  .welcome-happy {
    color: #88898a;
    font-size: 14px;
    margin-top: 6px;
  }

  .banner {
    width: 100%;
    object-fit: scale-down;
    margin-bottom: 16px;
    border-radius: 4px;
  }

  .content-group {
    min-height: 300px;

    .content-title {
      font-size: 15px;
      font-weight: 700;
      color: #1d2129;
      margin-bottom: 10px;
    }

    .content-li {
      font-size: 15px;
      color: #1d2129;
      margin-bottom: 4px;
    }
  }

  .module-title-bar {
    display: flex;
    align-items: baseline;

    .title {
      font-size: 15px;
      font-weight: 700;
      color: #1d2129;
    }

    .subtitle {
      font-size: 12px;
      margin-left: 10px;
      font-weight: 200;
      color: #4e5969;
    }

    .ph {
      flex: 1;
    }

    .more {
      color: var(--el-color-primary);
      cursor: pointer;
      font-size: 12px;
    }
  }

  .shortcut-list {
    .shortcut-item {
      margin-top: 16px;
      cursor: pointer;
      display: flex;
      height: 64px;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      border-radius: 2px;

      .item-bg {
        background-color: #f7f8fa;
        border-radius: 4px;
        width: 34px;
        height: 34px;
        flex: none;
        padding: 8px;
        box-sizing: border-box;
      }

      .name {
        margin-top: 4px;
        color: #424e66;
        font-size: 12px;
        font-weight: 200;
        line-height: 20px;
      }
    }
  }
}
</style>
